<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>DOM应用</title>
    <style>

    </style>
    <script>
    window.onload = function(argument) {
        var obut1 = document.getElementById('but1');
        var obut2 = document.getElementById('but2');
        var oul1 = document.getElementById('ul1');
        var otxt1 = document.getElementById('txt1');
        obut1.onclick = function(argument) {
            var oli1 = document.createElement('li');
            oli1.innerHTML = otxt1.value+'<a href="javascript:;" class="a1">删除</a> ';
             oli1.getElementsByTagName('a')[0].onclick=function (argument) {
            	oul1.removeChild(this.parentNode)// body...
            }
            oul1.appendChild(oli1); // body...
            otxt1.value='';
        }
        obut2.onclick = function(argument) {
            var oli1 = document.createElement('li');
            oli1.innerHTML=otxt1.value;
            var oa1=document.createElement('a');
            oa1.href="javascript:;";
            oa1.className="a1";
            oa1.innerHTML="remove";
            oli1.appendChild(oa1);
            var ali1 = oul1.getElementsByTagName('li')
            oli1.getElementsByTagName('a')[0].onclick=function (argument) {
            	oul1.removeChild(this.parentNode)// body...
            }
            oul1.insertBefore(oli1, ali1[0]); // body...
            otxt1.value="";
        }
    }
    </script>
</head>

<body>
这个javascript有点乱。删除 和removed 是用完全不同javascript。
    <div>
        <input type="text" id="txt1">
        <div>
            <input type="button" value="添加" id="but1"> 父级.appendChild(子节点)。
        </div>
        <div>
            <input type="button" value="添加" id="but2">父级.insertBefore(子节点，位置子节点)。</div>
    </div>
    <div>
        <ul id="ul1"></ul>
    </div>
    <div>注释：虽然ul中开始并没有li但是getbytag依然可以用ali1[0]依然存在。也就是说insertBefore问题，这个以前版本会有问题。</div>
   
</body>

</html>
